import React, {Component} from 'react';
import style from './Tabbar.module.scss'
class Tabbar extends Component {
    state={
        activeTab:'home',
        activeTabPathMap:{
            home:'/home',
            category:'/category',
            cart:'/cart',
            my:'/my'
        }
    }
    handleClick=(path)=>{
        this.setState({
            activeTab:path
        });
        this.props.history.push(this.state.activeTabPathMap[path])
    }
    handleHashChange=()=>{
        let activeTab = this.props.match.url.split("/")[1];
        this.setState({
            activeTab
        });
    }
    componentDidMount(){
        window.addEventListener("hashchange", this.handleHashChange);
    }
    componentWillUnmount(){
        window.removeEventListener("hashchange",this.handleHashChange);
    }
    render() {

        return (
            <div className={style.tabbarContainer}>
                <div className={style.tabbarContent}>{this.props.children}</div>
                <div className={style.tabbar}>
                    <div className={style.tabbarItem} onClick={()=>{this.handleClick('home')}}>
                        <i className={this.state.activeTab==='home' ?'icon icon-home-o':'icon icon-home'}></i>
                        <span className={this.state.activeTab==='home'?'title active':'title'}>首页</span>
                    </div>
                    <div className={style.tabbarItem} onClick={()=>{this.handleClick('category')}}>
                        <i className={this.state.activeTab==='category'?'icon icon-category-o':'icon icon-category'}></i>
                        <span className={this.state.activeTab==='category'?'title active':'title'}>分类</span>
                    </div>
                    <div className={style.tabbarItem} onClick={()=>{this.handleClick('cart')}}>
                        <i className={this.state.activeTab==='cart'?'icon icon-cart-o':'icon icon-cart'}></i>
                        <span className={this.state.activeTab==='cart'?'title active':'title'}>购物车</span>
                    </div>
                    <div className={style.tabbarItem} onClick={()=>{this.handleClick('my')}}>
                        <i className={this.state.activeTab==='my'?'icon icon-my-o':'icon icon-my'}></i>
                        <span className={this.state.activeTab==='my'?'title active':'title'}>我的</span>
                    </div>
                </div>
            </div>
        );
    }
}

export default Tabbar;








